<template>
	<view class="page">
		<view class="dialoguelist">
			<image style="width: 70rpx;" src="https://cdn8.axureshop.com/demo/2208121/images/%E6%99%BA%E8%83%BD%E5%AE%A2%E6%9C%8D/u6381.png" mode="widthFix"></image>
			<view class="dialogue">
				<view class="introduce">
					HI，我是专属智能客服，土豆炖蘑菇
				</view>
				<view class="ask">
					遇到问题，请尽管问我，我来帮你解答
				</view>
			</view>
		</view>
		<view class="dialoguelist">
			<image style="width: 70rpx;" src="https://cdn8.axureshop.com/demo/2208121/images/%E6%99%BA%E8%83%BD%E5%AE%A2%E6%9C%8D/u6381.png" mode="widthFix"></image>
			<view class="dialogue">
				<view class="title_bar">
					<view class="title">
						猜你想问
					</view>
					<view class="change">
						换一批
					</view>
				</view>
				<view class="asklists">
					<view class="asklist">
						1、如何绑定电子就诊卡？
					</view>
					<view class="asklist">
						2、门诊挂号如何操作？
					</view>
					<view class="asklist">
						3、处方能在手机上缴费吗？
					</view>
					<view class="asklist">
						4、门诊挂号能使用医保支付吗？
					</view>
					<view class="asklist">
						5、住院预交金能给亲友充值吗？
					</view>
					<view class="asklist">
						6、如何在手机上进行门诊挂号退费？
					</view>
				</view>
				<view class="title_bar">
					<view class="title">
						猜你想做
					</view>
				</view>
				<view class="dolists">
					<view class="dolist">
						<view class="doImg">
							
						</view>
						<view class="doing">
							门诊挂号
						</view>
					</view>
					<view class="dolist">
						<view class="doImg">
							
						</view>
						<view class="doing">
							门诊缴费
						</view>
					</view>
					<view class="dolist">
						<view class="doImg">
							
						</view>
						<view class="doing">
							门诊报告
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="minelist" v-for="(item,index) in minelist" :key="index">
			<view class="dialogue_mine">
				 <!-- 3、根据《处方管理办法》，处方开具当日有效；处方一般不得超过7日用量；对于某些慢性病、老年病或特殊情况，处方用量可适当延长，但医师应当注明理由。便民门诊不做病情、检验、检查结果的解释，不开具诊断证明书。 -->
				 {{item}}
			</view>
			<image style="width: 70rpx;" src="https://cdn8.axureshop.com/demo/2208121/images/%E6%99%BA%E8%83%BD%E5%AE%A2%E6%9C%8D/u6407.png" mode="widthFix"></image>
		</view>
		
		<!-- 输入框 -->
		<view class="send_ipt">
			<input type="text" class="ipt" v-model="value"  placeholder="请简述你的问题" />
			<!-- <uni-easyinput class="ipt" trim="all" v-model="value" placeholder="请简述你的问题" @input="input"></uni-easyinput> -->
			<button class="send" @click="send">发送</button>
		</view>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';

	const value = ref('')
	const minelist = reactive([])
	// const onKeyInput = (e) => {
	// 	console.log('输入内容：', value.value);
	// }
	const send = () => {
		minelist.push(value.value)
		value.value=''
	}
</script>

<style lang="scss" scoped>
	.page{
		background-color: #f2f2f2;
		min-height: 100vh;
		padding: 40rpx 34rpx 132rpx;
		box-sizing: border-box;
		.dialoguelist{
			display: flex;
			margin-bottom: 30rpx;
			.dialogue{
				width: 578rpx;
				border-radius: 16rpx;
				padding: 28rpx 36rpx;
				margin-left: 28rpx;
				background-color: #fff;
				box-sizing: border-box;
				font-family: 'Microsoft YaHei UI', sans-serif;
				font-size: 28rpx;
				color: #000;
				.ask{
					font-size: 24rpx;
					color: #aaa;
					margin-top: 20rpx;
				}
				.title_bar{
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 28rpx;
					.title{
						font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
						color: #000;
						font-weight: 700;
					}
					.change{
						font-family: 'Microsoft YaHei UI', sans-serif;
						font-size: 24rpx;
						color: #1677FF;
						cursor: pointer;
					}
				}
				.asklists{
					margin-top: 26rpx;
					font-family: 'Microsoft YaHei UI', sans-serif;
					font-size: 24rpx;
					color: #000000;
					padding-bottom: 30rpx;
					.asklist{
						margin-top: 10rpx;
						cursor: pointer;
					}
					.asklist:hover{
						text-decoration: underline;
					}
				}
				.dolists{
					margin-top: 28rpx;
					display: flex;
					.dolist{
						width: 32%;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						cursor: pointer;
						.doImg{
							width: 64rpx;
							height: 64rpx;
							background-color: rgba(186, 224, 255, 1);
							border-radius: 12rpx;
						}
						.doing{
							color: #333;
							font-family: 'Microsoft YaHei UI', sans-serif;
							font-size: 28rpx;
							margin-top: 14rpx;
						}
					}
				}
			}
		}
		.minelist{
			display: flex;
			justify-content: flex-end;
			margin-bottom: 30rpx;
			.dialogue_mine{
				// width: 578rpx;
				border-radius: 16rpx;
				padding: 28rpx 36rpx;
				margin-right: 28rpx;
				background-color: #fff;
				box-sizing: border-box;
				font-family: 'Microsoft YaHei UI', sans-serif;
				font-size: 28rpx;
				color: #000;
				font-family: 'Microsoft YaHei UI', sans-serif;
				font-size: 28rpx;
				color: #000;
			}
		}
		// 输入框
		.send_ipt{
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 132rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			padding: 0 30rpx;
			box-sizing: border-box;
			.ipt{
				width: 560rpx;
				height: 90rpx;
				border-radius: 100rpx;
				font-family: 'ArialMT', 'Arial', sans-serif;
				background-color: rgba(242, 242, 242, 1);
				font-size: 26rpx;
				color: #000;
				padding-left: 16rpx;
				box-sizing: border-box;
			}
			.send{
				width: 120rpx;
				height: 50rpx;
				line-height: 50rpx;
				background-color: #1890FF;
				color: #fff;
				border-radius: 50rpx;
				font-size: 24rpx;
				margin: 0 !important;
			}
		}
	}       
</style>
